<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电规划 - 兰博劳斯</title>
    <link rel="shortcut icon" href="/static/images/gt_favicon.png">

    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">

    <!-- Custom styles for our template -->

    <link rel="stylesheet" href="/static/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/static/js/html5shiv.js"></script>
    <script src="/static/js/respond.min.js"></script>
    <![endif]-->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        #nav {
            height: 50px;
            background-color: #46474a;
        }

        #nav ul li {
            width: 120px;
            float: left;
        }

        #nav ul li a {
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 18px;
            /* font-weight: bold; */
            color: white;
            text-align: center;
        }

        #nav ul li a:hover {
            background-color: white;
            color: #46474a;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }

        img {
            width: 978px;
            height: 550px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
    <style type="text/css">
        li.margin {
            margin-left: 50px;
        }
    </style>
    <style>
        a {
            text-decoration: none;
        }

        h1 {
            color: #000000;
        }

        h1 {
            text-shadow: 2px 2px #CCCCCC;
        }

        h1 {
            letter-spacing: 12px;
        }

        div.ex1 {
            direction: rtl;
        }

        select {
            padding: 8px 10px;
            border-radius: 4px;
            background-color: #f1f1f1;
        }

        input[type=button], input[type=submit], input[type=reset] {
            background-color: #000000;
            border: none;
            color: white;
            padding: 4px 8px;
            text-decoration: none;
            margin: 2px 1px;
            cursor: pointer;
            border-radius: 4px;
        }
    </style>
    <script src="/static/areas/js/jquery-3.3.1.min.js"></script>
    <script>
        // 页面加载完，才执行下面这段代码
        $(function () {
            //  使用ajax加载省信息，处理json数据，遍历从views中返回的数组，向pro中添加option
            $.get('/view_power/pro', function (list) {    // list—— {"data":[[1,'北京']，[2,'天津'],....]} list代表json
                pro = $("#pro");
                $.each(list.data, function (index, item) {
                    // 每个item的结构[1,'北京']
                    pro.append('<option value="' + item[0] + '">' + item[1] + '</option>')   // json序列化后，都是字符串
                });
            });

            //  查询市的信息
            $("#pro").change(function () {
                // /view_power/city140000/
                $.get('/view_power/city' + $(this).val() + '/', function (list) {           // list—— {"data":[{id:1,title:北京},{id:2,title:天津},{}...{}]}
                    city = $("#city");
                    city.empty().append('<option value="0">请选择市</option>');
                    $("#dis").empty().append('<option value="0">请选择区县</option>');
                    $.each(list.data, function (index, item) {
                        // {id:1,title:北京}
                        city.append('<option value="' + item.id + '">' + item.title + '</option>');
                    });
                });
            });

            // 查询区县的信息
            $("#city").change(function () {
                $.get('/view_power/city' + $(this).val() + '/', function (list) {
                    dis = $("#dis").empty().append('<option value="0">请选择区县</option>');
                    $.each(list.data, function (index, item) {
                        dis.append('<option value="' + item.id + '">' + item.title + '</option>');
                    });
                });
            });
        });

        // 第一次，请求localhost,把整个html页面呈现出来
        // 第二次，请求获取js文件
        // 第三次，请求pro视图，视图返回的是json
    </script>
</head>
<body>
<div id="nav">
    <ul>
        <li class="margin"><img src="/static/images/logo.png" style="width: 87.4px;height: 50px;">
        </li>
        <li><a href="{% url 'purchase_index' %}">购物商城</a></li>
        <li><a href="/moment/">车友圈</a></li>
        <li><a href="/view_power/">充电规划</a></li>
        <li><a href="/chatbot/botmain/">智能客服</a></li>
        <li><a href="/repair/">维修保养</a></li>

        {% if "info" in request.session.keys %}
        <li class="dropdown">
            <a href="#">
                我的</a>
            <div class="dropdown-content">
                <a href="{% url 'show_order' %}" style="color: #46474a;font-size: 17px;">购物订单</a>
                <a href="/repair/list/" style="color: #46474a;font-size: 17px;">维修订单</a>
                <a href="/infomation/" style="color: #46474a;font-size: 17px;">个人信息</a>
                <a href="/signout/" style="color: #46474a;font-size: 17px;">注销</a>
            </div>
        </li>

        {% else %}
        <li><a href="/signin/">登录 / 注册</a></li>
        {% endif %}

    </ul>
</div>

<center>
    <div style="height:600px;width:1000px"><img src="/static/images/1.jpg"></div>

    <div id="choose" style="margin-top:80px;">
        <h1>兰博劳斯充电规划服务</h1>
        <div style="color:#ADADAD;"><h4>请在下拉框中选择地图区域，点击提交刷新地图</h4></div>
        <form action="" method="post" style="margin-top:30px;">
            {% csrf_token %}
            <select id="pro" name="pro">
                <option value="0">请选择省</option>     <!-- option是下拉内容，
													   怎样用jquery向一个对象中追加其他对象？append(),$.each() -->
            </select>
            <select id="city" name="city">
                <option value="0">请选择市</option>
            </select>

            <select id="dis" name="dis">
                <option value="0">请选择区县</option>
            </select>
            <input type="submit">
        </form>
    </div>
</center>

<div class='my-legend' style="margin-left:80px;margin-top:200px;float:left">
    <div class='legend-title'>充电桩地图</div>
    <div class='legend-scale'>
        <ul class='legend-labels'>
            <li><span style='background:#000000;'></span>4S店</li>
            <li><span style='background:#5CACEE;'></span>空闲充电桩</li>
            <li><span style='background:#EE3B3B;'></span>占用充电桩</li>
        </ul>
    </div>
    <div class='legend-source'></div>
    <div class='legend-title'>直流/交流充电桩地图</div>
    <div class='legend-scale'>
        <ul class='legend-labels'>
            <li><span style='background:#EE9A00;'></span>直流充电桩</li>
            <li><span style='background:#EE3B3B;'></span>交流充电桩</li>
        </ul>
    </div>
    <div class='legend-source'></div>
    <div class='legend-title'>专享/公共充电桩地图</div>
    <div class='legend-scale'>
        <ul class='legend-labels'>
            <li><span style='background:#5CACEE;'></span>专享充电桩</li>
            <li><span style='background:#7CCD7C;'></span>公共充电桩</li>
        </ul>
    </div>
    <div class='legend-source'></div>
</div>

<style type='text/css'>
    .my-legend .legend-title {
        text-align: left;
        margin-bottom: 5px;
        font-weight: bold;
        font-size: 90%;
    }

    .my-legend .legend-scale ul {
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        float: left;
        list-style: none;
    }

    .my-legend .legend-scale ul li {
        font-size: 80%;
        list-style: none;
        margin-left: 0;
        line-height: 18px;
        margin-bottom: 2px;
    }

    .my-legend ul.legend-labels li span {
        display: block;
        float: left;
        height: 16px;
        width: 30px;
        margin-right: 5px;
        margin-left: 0;
        border: 1px solid #999;
    }

    .my-legend .legend-source {
        font-size: 70%;
        color: #999;
        clear: both;
    }

    .my-legend a {
        color: #777;
    }
</style>

<div class="tab" id="switch" style="margin-left:290px;">
    <div class="tab_list">
        <ul>
            <li class="current">充电桩地图</li>
            <li>直流/交流</li>
            <li>专享/公共</li>
        </ul>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">
            <iframe src="http://127.0.0.1:8000/view_power/power_map/" width=100% height=500px marginwidth=0
                    marginheight=0 frameborder="0" border="0"></iframe>
        </div>
        <div class="item">
            <iframe src="http://127.0.0.1:8000/view_power/AD_power_map/" width=100% height=500px marginwidth=0
                    marginheight=0 frameborder="0" border="0"></iframe>
        </div>
        <div class="item">
            <iframe src="http://127.0.0.1:8000/view_power/EP_power_map/" width=100% height=500px marginwidth=0
                    marginheight=0 frameborder="0" border="0"></iframe>
        </div>
    </div>
</div>

<center>
    <div style="margin-bottom:100px">
        <a href="choose_power" class="p5-button button-black">
            <span class="p5-button-word"><h1>点击查看路线规划</h1></span>
        </a>
        <div style="color:#ADADAD;"><h4>前往附近充电桩</h4></div>
    </div>

    <img src="/static/images/2.jpg">
</center>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:2px solid #828282;width:550px;float:left;margin-left:180px;margin-top:70px;">
    <div style="letter-spacing:12px;"><h3>品质、便捷、舒适的充电体验</h3></div>
    <div style="color:#ADADAD;"><h4>优选全国核心商圈周边好站，打造便捷出行生活圈，让充电更“无感”。</h4></div>
</div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:2px solid #828282;width:550px;float:right;margin-right:180px;margin-top:40px;margin-bottom:100px">
    <div style="letter-spacing:12px;" class="ex1"><h3>全球创新的智能能源服务体系</h3></div>
    <div style="color:#ADADAD;" class="ex1"><h4>科技智能的超级充电，让出行更简单。</h4></div>
</div>

<script>
    //获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    //for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        //给li设置索引号
        lis[i].setAttribute('index', i);
        lis[i].onclick = function () {
            //其余li清除class
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            //留下被点击的
            this.className = 'current';
            //显示内容
            var index = this.getAttribute('index');
            //隐藏其他，显示被点击的对应的item
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
        }
    }
</script>

<footer id="footer" class="top-space" style="background-color:#46474a;color:#FFFFFF;height:200px">

    <div class="footer1" style="margin-top:450px">
        <div class="container">
            <div class="row">

                <div class="col-md-3 widget">
                    <h3 class="widget-title">Contact</h3>
                    <div class="widget-body">
                        <p>+234 23 9873237<br>
                            <a href="mailto:#">some.email@somewhere.com</a><br>
                            <br>
                            234 Hidden Pond Road, Ashland City, TN 37015
                        </p>
                    </div>
                </div>

                <div class="col-md-3 widget" style="margin-top:-42px">
                    <h3 class="widget-title">Follow me</h3>
                    <div class="widget-body">
                        <p class="follow-me-icons clearfix">
                            <a href=""><i class="fa fa-twitter fa-2"></i></a>
                            <a href=""><i class="fa fa-dribbble fa-2"></i></a>
                            <a href=""><i class="fa fa-github fa-2"></i></a>
                            <a href=""><i class="fa fa-facebook fa-2"></i></a>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget" style="margin-top:-45px">
                    <h3 class="widget-title">Text widget</h3>
                    <div class="widget-body">
                        <p>Eius consequatur nihil quibusdam! Laborum, rerum, quis, inventore ipsa autem repellat
                            provident assumenda labore soluta minima alias temporibus facere distinctio quas adipisci
                            nam sunt explicabo officia tenetur at ea quos doloribus dolorum voluptate reprehenderit
                            architecto sint libero illo et hic.</p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>

    <div class="footer2">
        <div class="container">
            <div class="row">

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="simplenav">
                            <a href="#">Home</a> |
                            <a href="#">About</a> |
                            <a href="#">Sidebar</a> |
                            <a href="#">Contact</a> |
                            <b><a href="#">Sign up</a></b>
                        </p>
                    </div>
                </div>

                <div class="col-md-6 widget">
                    <div class="widget-body">
                        <p class="text-right">
                            Copyright &copy; 2014, Your name. Designed by <a href="http://gettemplate.com/"
                                                                             rel="designer">gettemplate</a>
                        </p>
                    </div>
                </div>

            </div> <!-- /row of widgets -->
        </div>
    </div>
</footer>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

<script src="/static/js/headroom.min.js"></script>
<script src="/static/js/jQuery.headroom.min.js"></script>
<script src="/static/js/template.js"></script>

</body>
</html>